<template>
  <CommonQueryLayout class>
    <TableTopControl
      title-text="组织结构列表"
      v-model:table-size="tableStateWrapper.tableSize"
      v-model:table-columns="tableStateWrapper.tableColumns"
      :loading="fetchOrgListLoading"
      @reload-data="getOrgList"
    >
      <Simbtn
        @click="openAddOrgDialog('0', 1)"
        type="primary"
        text="新增"
        icon="plus-square-outlined"
      />
    </TableTopControl>
    <a-table
      bordered
      :size="tableStateWrapper.tableSize"
      :columns="tableStateWrapper.tableColumns"
      :dataSource="tableStateWrapper.tableData"
      :loading="fetchOrgListLoading"
      :pagination="false"
      rowKey="id"
    >
      <template #options="{ record }">
        <a-space>
          <a-button
            size="small"
            @click="openMemberDialog(record.id)"
            :loading="findOrgMemberLoading"
          >
            查看成员
          </a-button>
          <a-button
            type="primary"
            size="small"
            @click="openEditOrgDialog(record)"
            :loading="
              fetchAccountListLoading || editOrgLoading || findOrgMemberLoading
            "
          >
            编辑
          </a-button>
          <a-dropdown>
            <template #overlay>
              <a-menu>
                <a-menu-item
                  @click="openAddOrgDialog(record.pid, record.level)"
                >
                  新增同级部门
                </a-menu-item>
                <a-menu-item
                  @click="openAddOrgDialog(record.id, record.level + 1)"
                >
                  新增下级部门
                </a-menu-item>
              </a-menu>
            </template>
            <a-button type="primary" size="small">
              新增
              <DownOutlined />
            </a-button>
          </a-dropdown>
          <a-popconfirm title="确定删除吗？" @confirm="deleteOrg(record.id)">
            <a-button
              :loading="deleteOrgLoading"
              type="primary"
              danger
              size="small"
            >
              删除
            </a-button>
          </a-popconfirm>
        </a-space>
      </template>
    </a-table>
  </CommonQueryLayout>
  <AddOrgDialog
    :data-wrapper="addOrgState"
    @enter="enterAddOrgDialog"
    :confirm-loading="addOrgLoading"
  />
  <EditOrgDialog
    :data-wrapper="editOrgState"
    @enter="enterEditDialog"
    :confirm-loading="editOrgLoading || updateOrgMenberLoading"
  />
  <MemberPreviewDialog
    :data-wrapper="memberDialogState"
    @cancel="closeMemberDialog"
    @page-change="getOrgMenmberByPage"
    :table-loading="findOrgMemberLoading"
  />
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import useSearchOrg from './hooks/useSearchOrg'
import useAddOrgDialog from './hooks/useAddOrgDialog'
import useEditOrgDialog from './hooks/useEditOrgDialog'
import useMemberPreviewDialog from './hooks/useMemberPreviewDialog'

import CommonQueryLayout from '@/layout/CommonQueryLayout.vue'
import { TableTopControl } from '@/components/TopControl'
import { Simbtn } from '@/components/Button'
import { message } from 'ant-design-vue'
import { useStore } from '@/store'
import { delOrg, OrganizationApi } from '@/api/userCenter/authority/organization'
import AddOrgDialog from './components/AddOrgDialog.vue'
import EditOrgDialog from './components/EditOrgDialog.vue'
import MemberPreviewDialog from './components/MemberPreviewDialog.vue'

const store = useStore()

const { fetchOrgListLoading, tableStateWrapper, getOrgList } = useSearchOrg()
const { addOrgState, openAddOrgDialog, enterAddOrgDialog, addOrgLoading } =
  useAddOrgDialog(getOrgList)
const {
  editOrgState,
  openEditOrgDialog,
  enterEditDialog,
  editOrgLoading,
  fetchAccountListLoading,
  updateOrgMenberLoading,
  findOrgMemberLoading,
} = useEditOrgDialog(getOrgList)
const {
  memberDialogState,
  openMemberDialog,
  closeMemberDialog,
  getOrgMenmberByPage,
} = useMemberPreviewDialog()

const deleteOrg = async (id: string) => {
  await delOrg(id)
  message.success('删除成功')
  await getOrgList()
}
const deleteOrgLoading = computed(() =>
  store.getters['global/isOpLoading'](OrganizationApi.DELETE_ORGANIZATION)
)

onMounted(async () => {
  await getOrgList()
})
</script>
